<template>
	<view>
		<ym-navbar title="优惠充值" :immersive="true" ></ym-navbar>
		<view class="bg1"></view>
		<view class="bg2"></view>
		<image class="text1" src="../static/wxImage/text-czyh.png" mode="widthFix"></image>
		<image class="text2" src="http://img.etubang.com/group1/M00/00/49/rBCky1-zNxaAN0y0AAW4lqBP4c8508.png" mode="widthFix"></image>
		<image class="bg3" src="../static/wxImage/bg-chongzhi.png" mode="widthFix"></image>
		<view class="btn">
			<button type="default" class="u-f-ajc" @tap="gotoCharge">
				<text>优惠充值</text>
				<u-icon name="arrow-right" top="-5" color="#1BC226"></u-icon>
			</button>
		</view>
	</view>
</template>

<script>
	import ymNavbar from "@/components/ym-navbar/ym-navbar.vue";
	
	export default {
		components:{ymNavbar},
		data() {
			return {
			};
		},
		onLoad(options) {
			this.operaId = options.operaId;
		},
		methods: {
			gotoCharge() {
				if(!this.$isAndroid()) {
					return uni.showModal({
						content:'IOS平台暂不支持充值业务！',
						showCancel: false
					})
				};
				uni.redirectTo({
					url:`/pagesUc/user-account/recharge?operaId=${this.operaId}`
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: linear-gradient(to bottom,#0FD17E 40%,#ffffff,#ffffff);
	overflow: hidden;
}
.bg1 {
	position: absolute;
	top: -50rpx;
	left: -50rpx;
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%; 
	background: linear-gradient(30deg, rgba(255,255,255,0),rgba(255,255,255,0.2));
}
.bg2 {
	position: absolute;
	top: 50rpx;
	right: -50rpx;
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%; 
	background: linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.2),rgba(255,255,127,0.5));
}
.text1 {
	position: absolute;
	top: 150rpx;
	left: 50%;
	width: 640rpx;
	height: 140rpx;
	transform: translateX(-50%);
}
.text2 {
	position: absolute;
	top: 400rpx;
	width: 640rpx;
	height: 574rpx;
	left: 50%;
	transform: translateX(-50%);
}
.bg3 {
	position: absolute;
	bottom: 0;
	width: 111vw;
	transform: translateX(-5vw);
}
.btn {
	position: absolute;
	bottom: 150rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 400rpx;
	height: 100rpx;
	
	>button {
		width: 400rpx;
		height: 108rpx;
		line-height: 100rpx;
		background: linear-gradient(0deg,#D9A018,#F7FF9F);
		border-radius: 60rpx;
		color: #1BC226;
		font-size: 44rpx;
		border: 4rpx solid #FFFFFF;
		box-sizing: content-box;
		box-shadow: 0 1rpx 10rpx 0rpx #D9A018;
	}
}
</style>
